@tick-character: "\f11b";
@arrow-right: "\f115";
@icon-document: "\f11c";
@trash: "\f11d";
@conflicts: "\f123";
@icon-info: "\f11e";
@icon-warning: "\f118";
@icon-danger: "\f11f";
@icon-connection-lost: "\f120";
@empty: "\f121";

.icon-style,
[class*=" icon-"],
[class^="icon-"] {
    /* use !important to prevent issues with browser extensions that change fonts */
    font-family: 'icomoon' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    position: relative;
    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    //top: .1em;
    line-height: 70%;
    font-size: 120%;
    vertical-align: -0.175em;

    &::after {
        position: absolute;
        bottom: 8%;
        right: -4%;
        font-size: 50%;
        line-height: 50%;
    }

    &.disabled {
        opacity: .5;
        color: @gray;

        &::before, &::after {
        }

        &::after {
            content: "\f122";
            position: absolute;
            left: -4px;
            top: 1px;
            font-size: 24px;
        }
    }
}

.bs3 {
    .icon-style,
    [class*=" icon-"],
    [class^="icon-"] {
        & + span {
            margin-left: @grid-gutter-width/4;
        }
    }
}

.icon-lg {
    font-size: 38px;
}

.icon-xl {
    display: block;
    text-align: center;
    padding-top: @gutter;
    padding-bottom: @gutter-sm;
    font-size: 58px;
    line-height: 1em;

    &:before {
        display: inline-block;
    }
}

.make-icon-color (@name, @color-before, @color-after) {
    .icon-@{name}::before {
        color: @color-before;
    }

    .icon-addon-@{name}::after {
        color: @color-after;
    }
}

/* ONLY MENU ICON COLORS */
&#main-menu {
    .make-icon-color(resources, @color-3, @color-3);
}

/* MENU AND TOPBAR ICON COLORS*/

&#main-menu, .inputs-container{
    .make-icon-color(documents, @color-4, @color-4);
    .make-icon-color(indexing, @color-5, @color-5);
    .make-icon-color(tasks-menu, @color-1, @color-1);
    .make-icon-color(settings, @color-2, @color-2);
    .make-icon-color(stats-menu, @color-3, @color-3);
    .make-icon-color(resources, @color-4-1, @color-4-1);
    .make-icon-color(cluster-dashboard, @color-4-2, @color-4-2);
    .make-icon-color(manage-server, @color-4-3, @color-4-3);
    .make-icon-color(info, @color-5, @color-5);
    .make-icon-color(document2, @color-2, @color-2);
    //Documents section
    .make-icon-color(recent, @color-4-1, @color-4-1);
    .make-icon-color(patch, @color-4-3, @color-4-3);
    .make-icon-color(documents-query, @color-5, @color-5);
    .make-icon-color(identities, @color-5-1, @color-5-1);
    .make-icon-color(cmp-xchg, @color-5-2, @color-5-2);
    .make-icon-color(conflicts, @color-5-3, @color-5-3);
    //Indexes section
    .make-icon-color(indexes-query, @color-5, @color-5);
    .make-icon-color(list-of-indexes, @color-5-1, @color-5-1);
    .make-icon-color(indexing-performance, @color-5-2, @color-5-2);
    .make-icon-color(index-batch-size, @color-5-3, @color-5-3);
    .make-icon-color(map-reduce-visualizer, @color-1, @color-1);
    .make-icon-color(index-cleanup, @color-1-1, @color-1-1);
    .make-icon-color(index-errors, @color-1-2, @color-1-2);
    //Tasks section
    .make-icon-color(backups, @color-1-1, @color-1-1);
    .make-icon-color(manage-ongoing-tasks, @color-1-2, @color-1-2);
    .make-icon-color(import-database, @color-1-3, @color-1-3);
    .make-icon-color(export-database, @color-2, @color-2);
    .make-icon-color(create-sample-data, @color-2-1, @color-2-1);
    //Settings section
    .make-icon-color(database-settings, @color-2-1, @color-2-1);
    .make-icon-color(manage-connection-strings, @color-2-2, @color-2-2);
    .make-icon-color(conflicts-resolution, @color-2-3, @color-2-3);
    .make-icon-color(database-client-configuration, @color-3, @color-3);
    .make-icon-color(database-studio-configuration, @color-3-1, @color-3-1);
    .make-icon-color(expos-refresh, @color-3-2, @color-3-2);
    .make-icon-color(document-expiration, @color-3-3, @color-3-3);
    .make-icon-color(documents-compression, @color-4, @color-4);
    .make-icon-color(revisions, @color-4-1, @color-4-1);
    .make-icon-color(revisions-bin, @color-4-2, @color-4-2);
    .make-icon-color(data-archival, @color-4-3, @color-4-3);
    .make-icon-color(timeseries-settings, @color-5, @color-5);
    .make-icon-color(custom-sorters, @color-5-1, @color-5-1);
    .make-icon-color(custom-analyzers, @color-5-2, @color-5-2);
    .make-icon-color(integrations, @color-5-3, @color-5-3);
    .make-icon-color(manage-dbgroup, @color-1, @color-1);
    .make-icon-color(database-record, @color-1-1, @color-1-1);
    .make-icon-color(database-id, @color-1-2, @color-1-2);
    .make-icon-color(tombstones, @color-1-3, @color-1-3);
    //Stats section
    .make-icon-color(stats, @color-3-1, @color-3-1);
    .make-icon-color(io-test, @color-3-2, @color-3-2);
    .make-icon-color(storage, @color-3-3, @color-3-3);
    .make-icon-color(stats-running-queries, @color-4, @color-4);
    .make-icon-color(replication-stats, @color-4-1, @color-4-1);
    
    // AI section
    .icon-ai::before {
        background: linear-gradient(120deg, #4ac8f9 0%, #5058ff 50%, #8b42f5 100%);
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    .ai-hub {
        &.icon-manage-connection-strings::before {
            color: @color-4-1;
        }
        &.icon-ai-agents::before {
            color: @color-4-2;
        }
        &.icon-manage-ongoing-tasks::before {
            color: @color-4-3;
        }
        &.icon-replication-stats::before {
            color: @color-5;
        }
    }

    //Manage server section
    .make-icon-color(cluster, @color-5-1, @color-5-1);
    .make-icon-color(client-configuration, @color-5-2, @color-5-2);
    .make-icon-color(studio-configuration, @color-5-3, @color-5-3);
    .make-icon-color(server-settings, @color-1, @color-1);
    .make-icon-color(administrator-js-console, @color-1-1, @color-1-1);
    .make-icon-color(certificate, @color-1-2, @color-1-2);
    .make-icon-color(server-wide-tasks, @color-1-3, @color-1-3);
    .make-icon-color(server-wide-custom-analyzers, @color-2, @color-2);
    .make-icon-color(server-wide-custom-sorters, @color-2-1, @color-2-1);
    //.make-icon-color(server-wide-backup, @color-1-3, @color-1-3);
    //.make-icon-color(global, @color-4-1, @color-4-1);
    .make-icon-color(admin-logs, @color-2-2, @color-2-2);
    .make-icon-color(traffic-watch, @color-2-3, @color-2-3);
    .make-icon-color(gather-debug-information, @color-3, @color-3);
    .make-icon-color(system-storage, @color-3-1, @color-3-1);
    .make-icon-color(manage-server-io-test, @color-3-2, @color-3-2);
    .make-icon-color(stack-traces, @color-3-3, @color-3-3);
    .make-icon-color(manage-server-running-queries, @color-4, @color-4);
    .make-icon-color(debug-advanced, @color-4-1, @color-4-1);
    //other
    .make-icon-color(system, #3c6fb4, #3c6fb4);
    .make-icon-color(plus, #b0d47d, #b0d47d);
    .make-icon-color(list, #ef5450, #ef5450);
    .make-icon-color(index-stats, #5c6bc0, #5c6bc0);
    .make-icon-color(etl, #ff346f, #ff346f);
    .make-icon-color(new, #d9e021, #d9e021);
    .make-icon-color(tasks, #fbb03b, #fbb03b);
    .make-icon-color(license, #e9eaea, #e9eaea);
    .make-icon-color(database, @brand-database-color, @brand-database-color);
    .make-icon-color(replication, #9c28b1, #9c28b1);
    .make-icon-color(sql-replication, #673bb7, #673bb7);
    .make-icon-color(topology, #ff756b, #ff756b);
    .make-icon-color(custom-functions, #b881ff, #b881ff);
    .make-icon-color(periodic-export, #018390, #018390);
    .make-icon-color(subscriptions, #35f9ff, #35f9ff);
}
